import React, { useState } from "react";
import { Table, Button, Modal, Form, Input, message, Tag } from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
function Home() {
  const [total, setTotal] = useState("");
  // 数据列表
  const [data, setData] = useState([
    {
      key: 1,
      id: "1",
      title: "新增博客项",
      name: "暂无作者",
      tags: ["暂无标签"],
      timedeti: "2025-02-26",
      timeadd: "2025-02-06",
    },
    {
      key: 2,
      id: "2",
      title: "八维考试那家强",
      name: "小龙龙",
      tags: ["八维"],
      timedeti: "2025-02-26",
      timeadd: "2025-02-06",
    },
    {
      key: 3,
      id: "3",
      title: "新增博客项",
      name: "暂无作者",
      tags: ["暂无标签"],
      timedeti: "2025-02-26",
      timeadd: "2025-02-06",
    },
    {
      key: 4,
      id: "4",
      title: "关于牢九门",
      name: "千年",
      tags: ["牢杨戬"],
      timedeti: "2025-03-9",
      timeadd: "2025-03-12",
    },
    {
      key: 5,
      id: "5",
      title: "新版本最强中单",
      name: "法师",
      tags: ["女娲"],
      timedeti: "2025-2-26",
      timeadd: "2025-03-16",
    },
    {
      key: 6,
      id: "6",
      title: "我心照明月",
      name: "暂无作者",
      tags: ["赤子之心"],
      timedeti: "2022-01-26",
      timeadd: "2021-02-06",
    },
    {
      key: 7,
      id: "7",
      title: "熊出没12周年",
      name: "熊出没",
      tags: ["12周年"],
      timedeti: "2024-01-26",
      timeadd: "2024-01-01",
    },
    {
      key: 8,
      id: "8",
      title: "关羽是否该增强",
      name: "明眸",
      tags: ["关羽"],
      timedeti: "2024-02-26",
      timeadd: "2024-01-06",
    },
    {
      key: 9,
      id: "9",
      title: "魔眼之湮",
      name: "我不吃香菜",
      tags: ["暂无标签"],
      timedeti: "2022-02-26",
      timeadd: "2021-04-06",
    },

    {
      key: 10,
      id: "10",
      title: "你想他(她)吗",
      name: "暂无作者",
      tags: ["伤感"],
      timedeti: "2024-02-26",
      timeadd: "2023-09-06",
    },
    {
      key: 11,
      id: "11",
      title: "新中国成立70周年",
      name: "人民日报",
      tags: ["中国"],
      timedeti: "2019-10-01",
      timeadd: "2019-10-01",
    },
    {
      key: 12,
      id: "12",
      title: "不嘻嘻",
      name: "暂无作者",
      tags: ["网络语用"],
      timedeti: "2025-01-26",
      timeadd: "2025-01-06",
    },

    {
      key: 13,
      id: "13",
      title: "司空震是否是版本之子",
      name: "琴酒",
      tags: ["司空震"],
      timedeti: "2025-03-13",
      timeadd: "2025-02-06",
    },
    {
      key: 14,
      id: "14",
      title: "哪吒",
      name: "暂无作者",
      tags: ["暂无标签"],
      timedeti: "2021-02-26",
      timeadd: "2019-02-06",
    },
  ]);
  // 控制模态框显示
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 当前编辑的记录
  const [currentRecord, setCurrentRecord] = useState(null);

  // 表单引用
  const [form] = Form.useForm();

  //表单搜索
  const [searchText, setSearchText] = useState("");
  // 表格列配置
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "博客标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "作者",
      dataIndex: "name",
      key: "name",
    },
    // {
    //   title: "标签",
    //   key: "tags",
    //   dataIndex: "tags",
    //   render: (_, { tags }) => (
    //     <>
    //       {tags.map((tag) => {
    //         let color = tag.length > 5 ? "geekblue" : "green";
    //         if (tag === "loser") {
    //           color = "red";
    //         }
    //         return (
    //           <Tag color={color} key={tag}>
    //             {tag.toUpperCase()}
    //           </Tag>
    //         );
    //       })}
    //     </>
    //   ),
    // },
    {
      title: "更新时间",
      dataIndex: "timedeti",
      key: "timedeti",
    },
    {
      title: "创造时间",
      dataIndex: "timeadd",
      key: "timeadd",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <div>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.key)}
          >
            删除
          </Button>
        </div>
      ),
    },
  ];
  // 添加或更新数据
  const handleSave = () => {
    form.validateFields().then((values) => {
      if (currentRecord) {
        // 更新操作
        const newData = data.map((item) =>
          item.key === currentRecord.key ? { ...item, ...values } : item
        );
        setData(newData);
        message.success("编辑成功");
      } else {
        // 添加操作;
        const newKey = data.length + 1;
        const newData = [
          ...data,
          {
            key: newKey,
            id: values.id,
            title: values.title,
            name: values.name,
            tags: values.tags,
            timedeti: values.timedeti,
            timeadd: values.timeadd,
          },
        ];
        setData(newData);
        message.success("添加成功");
      }
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  // 删除数据
  const handleDelete = (key) => {
    const newData = data.filter((item) => item.key !== key);
    Modal.confirm({
      title: "温馨提示",
      content: "确定要删除吗？",
      onOk() {
        // 点击确认后的操作
        console.log("删除操作已执行");
        setData(newData);
        message.success("删除成功");
      },
      onCancel() {
        // 点击取消后的操作
        console.log("取消删除");
        message.info("已取消删除");
      },
    });
  };

  // 编辑数据
  const handleEdit = (record) => {
    setCurrentRecord(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  // 取消模态框
  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };
  //搜索效果
  const handleSearch = (value) => {
    setSearchText(value);
  };
  const filteredData = data.filter((item) =>
    item.name.toLowerCase().includes(searchText.toLowerCase())
  );
  return (
    <div>
      <Input.Search
        placeholder="搜索作者"
        onSearch={handleSearch}
        style={{ width: 200, marginBottom: "16px" }}
      />
      <br></br>
      <Button
        type="primary"
        onClick={() => {
          setCurrentRecord(null);
          form.resetFields();
          setIsModalVisible(true);
        }}
        icon={<PlusOutlined />}
      >
        新增
      </Button>
      <Table
        dataSource={filteredData}
        columns={columns}
        rowKey="key"
        style={{ marginTop: 16 }}
        pagination={{
          defaultPageSize: "3",
          showSizeChanger: true,
          showQuickJumpe: true,
        }}
      />
      <Modal
        title={currentRecord ? "编辑博客" : "新增博客"}
        open={isModalVisible}
        onOk={handleSave}
        onCancel={handleCancel}
      >
        <Form form={form}>
          <Form.Item name="id" label="序号">
            <Input placeholder="请输入序号" />
          </Form.Item>
          <Form.Item name="title" label="博客标题">
            <Input placeholder="请输入博客标题" />
          </Form.Item>
          <Form.Item name="name" label="作者">
            <Input placeholder="请输入作者" />
          </Form.Item>
          <Form.Item name="timedeti" label="更新时间">
            <Input placeholder="请输入更新时间" />
          </Form.Item>
          <Form.Item name="timeadd" label="创造时间">
            <Input placeholder="请输入创造时间" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Home;
